<template>
  <div class="container">
    <div class="dashboard-container">
      <div class="app-container">
        <el-card shadow="hover">
          <el-row type="flex" class="row-bg" justify="end">
            <el-col :span="1.5"
              ><el-button type="success" @click="$router.push('/questions/new')" style="margin-bottom:10px"
                >新增试题</el-button
              ></el-col
            >
          </el-row>
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="selForm"
          >
            <el-row :gutter="0" justify="space-around">
              <el-col :span="6">
                <el-form-item label="学科" label-width="70px" prop="subjectID">
                  <el-select
                    v-model="formInline.subjectID"
                    placeholder="请选择"
                    @change="
                      getDirecList();
                      getTagList();
                    "
                  >
                    <el-option
                      :label="item.subjectName"
                      :value="item.id"
                      v-for="item in SubjectList"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="二级目录" prop="catalogID">
                  <el-select
                    v-model="formInline.catalogID"
                    placeholder="请选择"
                  >
                    <el-option
                      :label="item.directoryName"
                      :value="item.id"
                      v-for="item in direclist"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="标签" prop="tags">
                  <el-select v-model="formInline.tags" placeholder="请选择">
                    <el-option
                      :label="item.tagName"
                      :value="item.id"
                      v-for="item in taglist"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    v-model="formInline.keyword"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select
                    v-model="formInline.questionType"
                    placeholder="请选择"
                  >
                    <el-option label="单选" value="1"></el-option>
                    <el-option label="多选" value="2"></el-option>
                    <el-option
                      label="简答"
                      value="3"
                    ></el-option> </el-select></el-form-item
              ></el-col>

              <el-col :span="6">
                <el-form-item label="难度" label-width="70px" prop="difficulty">
                  <el-select
                    v-model="formInline.difficulty"
                    placeholder="请选择"
                  >
                    <el-option label="简单" value="1"></el-option>
                    <el-option label="一般" value="2"></el-option>
                    <el-option label="困难" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="方向" prop="direction">
                  <el-select
                    v-model="formInline.direction"
                    placeholder="请选择"
                  >
                    <el-option
                      label="o2o       "
                      value=" o2o       "
                    ></el-option>
                    <el-option
                      label="外包服务   "
                      value="外包服务  "
                    ></el-option>
                    <el-option
                      label="企业服务   "
                      value="企业服务  "
                    ></el-option>
                    <el-option
                      label="互联网金融 "
                      value="互联网金融"
                    ></el-option>
                    <el-option
                      label="企业咨询   "
                      value="企业咨询  "
                    ></el-option>
                    <el-option
                      label="互联网    "
                      value=" 互联网   "
                    ></el-option>
                    <el-option
                      label="电子商务   "
                      value="电子商务  "
                    ></el-option>
                    <el-option
                      label="其他      "
                      value=" 其他      "
                    ></el-option>
                  </el-select> </el-form-item
              ></el-col>

              <el-col :span="6">
                <el-form-item label="录入人" prop="creatorID">
                  <el-select
                    v-model="formInline.creatorID"
                    placeholder="请选择"
                  >
                    <el-option
                      :label="item.username"
                      :value="item.id"
                      v-for="item in userlist"
                      :key="item.id"
                    ></el-option>
                  </el-select> </el-form-item
              ></el-col>

              <el-col :span="6">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input
                    v-model="formInline.remarks"
                    placeholder="审批人"
                  ></el-input> </el-form-item
              ></el-col>

              <el-col :span="6">
                <el-form-item label="企业简称" prop="shortName">
                  <el-input
                    v-model="formInline.shortName"
                    placeholder="审批人"
                  ></el-input> </el-form-item
              ></el-col>

              <el-col :span="6">
                <el-form-item label="城市" prop="province">
                  <el-select
                    v-model="formInline.province"
                    placeholder="请选择"
                    style="width: 90px"
                    @change="getCity()"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="item in provinces"
                      :key="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="city">
                  <el-select
                    v-model="formInline.city"
                    placeholder="请选择"
                    style="width: 90px"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="item in citys"
                      :key="item"
                    ></el-option>
                  </el-select> </el-form-item
              ></el-col>

              <el-col :span="6">
                <el-form-item class="left100">
                  <el-button size="small" @click="resetForm()">清除</el-button>
                  <el-button size="small" type="primary" @click="getlist()"
                    >查询</el-button
                  >
                </el-form-item></el-col
              >
            </el-row>
          </el-form>

          <el-alert type="info" show-icon>
            <template #default>
              {{ `当前有${counts}条数据` }}
            </template>
          </el-alert>

          <el-table :data="tableData" stripe>
            <el-table-column prop="number" label="试题编号"></el-table-column>
            <el-table-column prop="subject" label="学科"></el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column label="题型">
              <template #default="{ row }">
                {{
                  row.questionType === "1"
                    ? "单选"
                    : row.questionType === "2"
                    ? "多选"
                    : "简答"
                }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="270">
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template #default="{ row }">
                {{ row.addDate | dataFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度">
              <template #default="{ row }">
                {{
                  row.difficulty === "1"
                    ? "简单"
                    : row.difficulty === "2"
                    ? "一般"
                    : "困难"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人"> </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button
                  icon="el-icon-view"
                  plain
                  circle
                  type="primary"
                  @click="see(row)"
                ></el-button>
                <el-button
                  icon="el-icon-edit"
                  plain
                  circle
                  type="success"
                  @click="edit(row)"
                ></el-button>
                <el-button
                  icon="el-icon-delete"
                  plain
                  circle
                  type="danger"
                  @click="del(row)"
                ></el-button>
                <el-button
                  icon="el-icon-check"
                  plain
                  circle
                  type="warning"
                  @click="check(row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 对话框 -->
          <el-dialog
            title="题目预览"
            :visible.sync="dialogFormVisible"
            width="75%"
            @close='isShow=false;dialogFormVisible=false'
          >
            <section>
              <el-row :gutter="20" style="margin-bottom: 25px">
                <el-col :span="6"
                  >【题型】:
                  {{
                    questionInfo.questionType === "1"
                      ? "单选题"
                      : questionInfo.questionType === "2"
                      ? "多选题"
                      : "简答题"
                  }}</el-col
                >
                <el-col :span="6">【编号】:{{ questionInfo.id }}</el-col>
                <el-col :span="6"
                  >【难度】:{{
                    questionInfo.difficulty === "1"
                      ? "简单"
                      : questionInfo.difficulty === "2"
                      ? "一般"
                      : "困难"
                  }}</el-col
                >
                <el-col :span="6">【标签】:{{ questionInfo.tags }}</el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom: 25px">
                <el-col :span="6"
                  >【学科】:{{ questionInfo.subjectName }}</el-col
                >
                <el-col :span="6"
                  >【目录】:{{ questionInfo.directoryName }}</el-col
                >
                <el-col :span="6">【方向】:{{ questionInfo.direction }}</el-col>
              </el-row>
            </section>
            <hr />
            <section>
              <div>【题干】:</div>
              <div v-html="questionInfo.question" style="color: blue"></div>
              <div>
                <div
                  v-if="
                    questionInfo.questionType === '1' ||
                    questionInfo.questionType === '2'
                  "
                >
                  <span>
                    {{
                      questionInfo.questionType === "1"
                        ? "单选题"
                        : questionInfo.questionType === "2"
                        ? "多选题"
                        : "简答题"
                    }}</span
                  >
                  <span>选项:</span>
                  <span>(以下选中的选项为正确答案)</span>
                </div>
                <div v-if="questionInfo.questionType === '1'">
                  <el-row
                    type="flex"
                    justify=""
                    style="margin: 10px 0px"
                    v-for="item in questionInfo.options"
                    :key="item.id"
                  >
                    <el-col :span="24">
                      <el-radio
                        v-model="isChecked"
                        :label="item.id"
                        v-if="item"
                        disabled
                        >{{ item.title }}</el-radio
                      >
                    </el-col>
                  </el-row>
                </div>
                <div v-if="questionInfo.questionType === '2'">
                  <el-checkbox-group v-model="checkList">
                    <el-row
                      type="flex"
                      justify=""
                      style="margin: 10px 0px"
                      v-for="item in questionInfo.options"
                      :key="item.id"
                    >
                      <el-col :span="24">
                        <el-checkbox
                          :label="item.title"
                          v-if="item"
                          disabled
                        ></el-checkbox>
                      </el-col>
                    </el-row>
                  </el-checkbox-group>
                </div>
              </div>
            </section>
            <hr />
            <section>
              <el-row type="flex" justify="">
                <el-col :span="24">
                  【参考答案】:
                  <el-button type="danger" @click='isShow=true'>视频答案预览</el-button>
                  <br>
                  <video width="320" height="240" controls v-if="isShow&&questionInfo.videoURL">
                    <meta name="referrer" content="never">
                    <source :src="questionInfo.videoURL" type="video/mp4" />
                    您的浏览器不支持Video标签。
                  </video>
                </el-col>
              </el-row>
            </section>
            <hr />
            <section>
              <el-row type="flex" justify="">
                <el-col :span="24">
                  <span>【答案解析】:</span>
                  <span v-html="questionInfo.answer"></span>
                </el-col>
              </el-row>
            </section>
            <hr />
            <section>
              <el-row type="flex" justify="">
                <el-col :span="24">
                  【题目备注】:
                  {{ questionInfo.remarks }}
                </el-col>
              </el-row>
            </section>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" type="primary"
                >关 闭</el-button
              >
            </div>
          </el-dialog>

          <div style="float: right; margin: 10px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.page"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageInfo.pagesize"
              layout="prev, pager, next,sizes, jumper"
              :total="counts"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { sublist } from '@/api/hmmm/subjects'
import { direclist } from '@/api/hmmm/directorys'
import { taglist } from '@/api/hmmm/tags'
import { userlist } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'

import moment from 'moment'
export default {
  name: 'questions',
  data () {
    return {
      SubjectList: [],
      direclist: [],
      taglist: [],
      userlist: [],
      provinces: provinces(),
      citys: '',
      formInline: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      counts: null,
      tableData: [],
      pageInfo: {
        page: 1,
        pages: 1,
        pagesize: 10
      },
      dialogFormVisible: false,
      questionInfo: {},
      isShow: false
    }
  },
  created () {
    this.getlist()
    this.getSubjectList()
    this.userList()
  },
  filters: {
    dataFormat (val) {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  computed: {
    isChecked () {
      const newarr = this.questionInfo.options.filter(
        (item) => item.isRight === 1
      )
      return newarr[0].id
    },
    checkList () {
      const newarr = this.questionInfo.options.filter(
        (item) => item.isRight === 1
      )
      const arr1 = newarr.map((item) => item.title)
      return arr1
    }
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const { data } = await sublist({ page: 1, pagesize: 999 })
      this.SubjectList = data.items
    },
    // 获取二级目录
    async getDirecList () {
      const id = this.formInline.subjectID
      const { data } = await direclist({
        subjectID: id,
        page: 1,
        pagesize: 999
      })
      this.direclist = data.items
    },
    // 获取标签列表
    async getTagList () {
      const id = this.formInline.subjectID
      const { data } = await taglist({ subjectID: id, page: 1, pagesize: 999 })
      this.taglist = data.items
    },
    // 获取用户列表
    async userList () {
      const { data } = await userlist()
      this.userlist = data.list
    },
    // 获取城市列表
    getCity () {
      this.citys = citys(this.formInline.province)
    },
    // 重置表单
    resetForm () {
      this.$refs.selForm.resetFields()
    },
    // 获取表格数据
    async getlist () {
      const newForm = {}
      for (const key in this.formInline) {
        if (this.formInline[key] !== '') {
          newForm[key] = this.formInline[key]
        }
      }
      const { data } = await list({ ...this.pageInfo, ...newForm })
      this.tableData = data.items
      this.counts = data.counts
    },
    // 试题预览
    async see (row) {
      console.log(row)
      this.dialogFormVisible = true
      const { data } = await detail(row)
      console.log(data)
      this.questionInfo = data
    },
    // 试题编辑
    edit (row) {
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    // 试题删除
    del (row) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await remove(row)
        console.log(data)
        if (this.pageInfo.page > 1 && this.tableData.length === 1) {
        // 则删除成功之后，当前页的数据条数为 0，需要请求上一页数据
          this.pageInfo.page--
        }
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 加入精选
    check (row) {
      row.choiceState = 1
      console.log(row)
      this.$confirm('此操作将此题目加入精选， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const { data } = await choiceAdd(row)
        console.log(data)
        this.$router.push('/questions/choice')
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageInfo.pagesize = val
      this.pageInfo.page = 1
      this.getlist()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pageInfo.page = val
      this.getlist()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang='scss'>
.left100 {
  margin-left: 150px;
}
</style>
